チュートリアル 15: Web シーンのエクスポート
チュートリアル データ
チュートリアル データは、[Help] メニュー → [Download Tutorials and Examples…] を選択し、[CityEngine Tutorial] からダウンロードできます。
概要
CityEngine シーンを Web シーン (*.3ws) にエクスポートし、CityEngine Web ビューアーでの確認と Web シーンを ArcGIS Online に共有する方法を学習します。
| 演習 |
|---|
| ・Part 1: Web シーンに CityEnigne シーンをエクスポートする |
| ・Part 2: Web シーンをローカルでプレビューする |
| ・Part 3: CityEngine Web ビューアー |
| ・Part 4: ArcGIS Online にパブリッシュ |
Part 1: Web シーンに CityEnigne シーンをエクスポートする
チュートリアルのセットアップ
- ComplexPatterns.cej シーンを開きます。
- モデルを生成します。
シーン レイヤー
[Scene] ウィンドウのレイヤーを確認します。
Web ビューアーでは、CityEngine シーンと同じように表示されるため、レイヤーのセットアップは Web シーンにおいて必要不可欠です。
- このシーンには、Dev HQ building に 5 つのレイヤー (外壁ありのレイヤー、外壁なしのレイヤー、1 階から 3 階までの各フロアのレイヤー) が含まれています。外壁なしのレイヤーはのちに Web シーン上でスワイプを有効にした際に使用されるため、基本的に空です。
- キャンパスの建物と周囲を取り囲む建物群は単純なシェープで含まれています。
- 岩や樹木、街灯などはそれぞれ 3D アセットからテクスチャを参照したポイント データです。
その他のシーンの詳細情報
実際の 3D コンテンツとは別に、他のシーンの詳細情報も Web シーンにエクスポートされます。
ブックマーク
CityEngine シーンで作成したブックマークも Web シーンにエクスポートされます。すべてのブックマークが Web ビューアーのブックマーク メニュー (左上のスター アイコン) に表示されます。
現在の表示
エクスポートする際のカメラ ビュー (カメラの位置と方向) も Web ビューアーでロードした Web シーンを開いた際に最初のビューとして表示されます。Web シーンをエクスポートする際は、任意のカメラ ポジションの状態でエクスポートすることをお勧めします。
以下の影設定も、Web シーンにエクスポートされます。
Shadow on/off
直接的な影に対して、最初の状態の設定です。
Ambient Occlusioin on/off
拡散影に対して、最初の状態の設定です。
環境遮蔽の設定
Scene Light and Panorama 設定にある 4 つの環境遮蔽の設定を Web シーンにエクスポートし、その設定を使用することができます。
Web ビューアーは [日差し] ウィンドウから位置 (World position) と時間情報を基に光を調節しているので、Web シーン上では光の仰角と方位角は異なることがあります。
3ws のエクスポート
全てのレイヤーが表示されているのを確認し、ドラッグ選択によりシーンのすべてのモデルを選択します。
[File] メニュー → [Export Models] をクリックします。
[CityEngine WebScene] を選択します。
基本的なエクスポート オプション
出力先のモデル/フォルダーが現在のプロジェクトに設定されていることを確認します。
[Object Interaction]、[Object Metadata] および [Textures] の設定はすべてのデフォルト動作を定義します。
他のエクスポート設定の詳細については、「CityEngine ヘルプ マニュアル」をご参照ください。
[Simplify Terrain Meshes] オプションには特に注意してください。このオプションは、*.3ws ファイルのファイル サイズを軽減するのに役立ちます。512 x 512 解像度以上のテレインは、単純化処理に時間がかかります。一般的に、テレインは低解像度に設定してから、テレイン単純化機能を有効にしてください。
レイヤーごとのエクスポート オプション
| オプション | 説明 |
|---|---|
| レイヤーの有効化 (Layer Enabled) | 最初の列をチェックして、すべてのレイヤーがエクスポートされることを確認します。 チェックアウトされている場合、このレイヤーのオブジェクトはエクスポート用に選択されていません (またはレイヤーが非表示になっています)。 |
| レイヤー名 (Layer Name) | CityEngine シーンとしてのレイヤー名。 |
| グループ名 (Group Name) | Dev HQ の外壁ありのレイヤーと外壁なしのレイヤーをレイヤー グループとして設定します。 この設定を有効にすると、この 2 つのレイヤーが Web ビューアーでスワイプの比較対象になります。 |
| 状態 (State) | パノラマとテレインの状態 (State) は自動的に [Backdrop (背景)] として設定されます。これらは常に表示状態になり、レイヤー リストには表示されません。 外壁なしのレイヤーを [Hidden (非表示)] にすると、Dev HQ group の初期表示設定が外壁ありのレイヤーになります。 |
| 相互作用 (Interaction) | 背景レイヤーは選択できず、自動的に [Locked (固定)] になります。その他のレイヤーはデフォルトで [Scene Setting (シーン設定)] になります。 [Scene Seting (シーン設定)] は、前のダイアログ ボックスで [Pickable (選択可能)] に設定されています。 |
| メタデータ (Metadata) | ここでは、Campus buildings に限りメタデータを表示したいので、他のレイヤーは [None (なし)] に設定します。 [Scene Setting (シーン設定)] は、前のダイアログ ボックスで [All (すべて)] に設定されています。 |
| テクスチャ (Textures) | テレインには専用の JPG テクスチャが用意され、テレイン レイヤーのテクスチャとして設定されています。そのため、テレイン レイヤーに対しては、[Original Textures (オリジナル品質)] を使用できます。 他のレイヤーは [Scene Setting (シーン設定)] を使用します。 [Scene Setting (シーン設定)] は、前のダイアログ ボックスで [Compact] に設定されています。 |
[Textures] オプションを [Original Textures (オリジナル品質)] に設定できるのは、準備されたテクスチャのみです。WebGL は PNG と JPG テクスチャのみをサポートしており、他の TIFF などのイメージ形式では、真っ黒に表示されます。
準備されていないテクスチャを使用する場合は、[Textures] オプションを [High]、[Medium]、[Low]、[Half Sized] または [Compact] (推奨) に設定してください。
[Finish] をクリックして、エクスポート処理を開始します。指定した出力場所に Web シーン ファイル (*.3ws) が作成されます。
Part 2: Web シーンをローカルでプレビューする
Web シーンで実際にどのように表示されるのか、またエクスポートやレイヤー設定が正しく行われているかを確認するために、Web シーンをパブリッシュする前に、ローカルでプレビューすることをお勧めします。
- CityEngine の [Navigator] ウィンドウ上でエクスポートした Web シーン ファイル (*.3ws) を見つけます。
- *.3ws ファイルを右クリックし、[Open] をクリックします。
この操作で Web ブラウザーが開き、ロードした新規シーンを CityEngine Web ビューアーでロードできるようになります。このプレビュー機能は、システム初期設定のブラウザーでシーンをロードします。他のブラウザー (WebGL をサポートしていないブラウザーなど) でプレビューしたい場合はシステム初期設定のブラウザーを変更するか、URL をコピーして、任意のブラウザーに貼り付ける方法があります。
デフォルトでは、Web シーン プレビューはローカルで CityEngine Web ビューアーをロードしますが、CityEngine Web ビューアー アプリケーションは ArcGIS Online からリモートでアクセスします。
また、次のようにオフライン モードで CityEngine Web シーン プレビューを開始することもできます。
CityEngine の [Navigator] ウィンドウでエクスポートした Web シーン (*.3ws) を右クリックします。
[Open With] で [3D Web Scene Viewer (Offline)] を選択します。
CityEngine Web シーンは CityEngine の中でのみプレビューできます。そのため、CityEnigne Web シーンは常に CityEngine の [Navigator] ウィンドウから開く必要があります。
システム ファイル ブラウザー (Windows エクスプローラーなど) から *.3ws ファイルをダブルクリックしても、CityEngine Web シーン プレビューは開きません。
Part 3: CityEngine Web ビューアー
以下の画像は、CityEngine Web シーンを Web シーン プレビューで表示した状態です。
レイヤーが希望通り表示されているかを確認します。また、Dev HQ レイヤー グループがラジオ グループ (radio group) として表示されているかも注目してください。
スワイプ アイコンをクリックして、Dev HQ レイヤー グループをスワイプします。
画像は、外壁あり (左) と外壁なし (右) のレイヤーのスワイプ ビューです。
CityEngine Web ビューワーにブックマークが想定通りに表示されていることを確認してください。
[3D Viewport] ウィンドウ上にマウスを載せるとブックマーク バーが現れます。[再生] ボタンをクリックすれば、ブックマークを順にめぐるツアーを開始することができます。
Campus Buildings のオブジェクトを 1 つ選択し、[情報] ウィンドウにある追加メタデータを表示します。
[設定] ウィンドウの直接的な影 (日差し) と影の拡散 (環境遮蔽) チェックボックスをオンにします。
[レイヤー] ウィンドウで、フロア 1 と 3 を非表示にして、フロア 2 を見やすくします。
[検索] ウィンドウで、「restroom」を検索します。
CityEngine Web ビューアーについての詳細は、ArcGIS Online ヘルプをご参照ください。
Part 4: ArcGIS Online にパブリッシュ
CityEngine Web シーンを ArcGIS Online にアップロードし、特定のユーザーや全世界に向けて簡単に共有することができます。
この機能を使用するには、ArcGIS Online アカウントが必要です。
アカウントの作成については、組織の管理者にお問い合わせいただくか、「ArcGIS Online スタートアップ ガイド」をご参照ください。
アップロード
[Navigator] ウィンドウで、アップロードする *.3ws ファイルを選択します。
右クリック → [Share As…] を選択します。
[CityEngine Web Scene Package] ウィザードが開きます。
[Upload package to my ArcGIS Online account] をオンにします。
Web シーンに名前を付けるか、提案された名前を使用します。
[Item Description] タブをクリックします。
[Summary] に Web シーン アイテムの概要を入力します。
[Tags] で Web シーン アイテム用のタグを選択、または入力します。
[Share] ボタンをクリックします。
ArcGIS Online にサイン インしていない場合は、[ArcGIS Sign In for CityEngine] ダイアログが開きます。
資格情報を入力してサイン インします。
Web シーンがユーザーの ArcGIS Online アカウントにアップロードされます。
ArcGIS Online 上の Web シーン
アップロードが終了したら、[Navigator] ウィンドウに ArcGIS Online のアイテムとして Web シーンが表示されます。
アイテムを右クリックして、[Open in browser] をクリックします。
アイテム詳細ページで、[サムネイルの編集] をクリックしてサムネイルを追加 (例: プロジェクトの画像フォルダーなどから) します。
[共有] をクリックしてアクセス権を設定します。
[アプリケーションを表示] をクリックして、Web ビューアーを起動します。
アイテムを公開している場合、Web ビューアー上の [共有] リンクから Facebook や Twitter に投稿できたり、メールの送信、短縮 URL や Web ページへの埋め込みコードの生成ができます。
